// 当页面加载完成执行如下函数
window.onload = function () {
    // 获取头部元素以及start按钮元素
    var headEle = document.getElementById("head");
    var startEle = document.getElementById("start");
    // 获取本鸟元素
    var birdEle = document.getElementById("bird");
    // 获取ul标签元素
    var ulEle = document.getElementById("duct");

    // 获取分数的元素对象
     var scoreEle =  document.querySelector("#score");

     // 获取游戏结束的div元素
     var gameoverEle = document.getElementById("gameover");

     // 获取音频标签元素对象
     var audioEle = document.getElementById("music");

     var changeEle = document.getElementById("change");
   
    // 给start按钮绑定单击事件
    startEle.onclick = function () {

        // 当页面开始按钮一点击就播放背景音乐
        audioEle.src = "./music/game_music.mp3";

        // 头部元素和开始按钮影藏
        headEle.style.display = "none";
        startEle.style.display = "none";
        // 显示本鸟
        birdEle.style.display = "block";

        // 定义变量:isDelMover 
        var isDelMover = false;

        // 让birdEle 能向下飞翔
        // 1. 定义一个小鸟初始飞翔的速度 speed 刚开始为0
        birdEle.speed = 0 ;

        // 2. 每隔30毫秒让小鸟的速度增加： 0.5 
        birdEle.moverTime =  setInterval(function(){
            // 3. 让小鸟的速度增加： 0.5 
            birdEle.speed += 0.5;
            /*
                4. 根据小鸟的速度判断小鸟是向下飞还是向上飞
                当 birdEle.speed >= 0 时， 说明小鸟向下飞翔，小鸟图片要切换为向下飞的图片
                当 birdEle.speed < 0 时， 说明小鸟向上飞翔，小鸟图片要切换为向上飞的图片
            */
            if(birdEle.speed >= 0){  
                // 处理小鸟向下飞的情况
                birdEle.children[0].src = "./img/down_bird1.png";
            }
            else{
                // 处理小鸟向上飞的情况
                birdEle.children[0].src = "./img/up_bird0.png";
            }
            // 设置小鸟在游戏界面中的上下边界
            // 当小鸟飞到游戏界面顶部时，不能再往上飞，但是游戏没有结束
            if(birdEle.offsetTop <= 0){
                birdEle.style.top = "0px";
            }
            // 当小鸟飞到游戏界面地上时，游戏结束
            if(birdEle.offsetTop >= 395){
                // 小鸟落地了
                // 小鸟死在地上，不动了
                birdEle.style.top = "395px";
                // 小鸟不飞了
                clearInterval(birdEle.moverTime);
                // 管道不创建
                clearInterval(createTimer);
                // 让管道立即停止移动
                // clearInterval(liEle.moverTime);
                isDelMover = true;

                //5. 出现游戏结束的图片
                gameoverEle.style.display = "block";

                // 6. 小鸟死亡的音乐
                changeEle.src = "./music/game_over.mp3";
            }
            // 每隔30毫秒修改小鸟在游戏界面距离顶部的值
            birdEle.style.top  = birdEle.offsetTop + birdEle.speed +"px";


            // 做碰撞检测
            // 准备方法需要的参数
            // 获取上管道和下管道对象
            var ducts = document.getElementsByClassName("duct_row");


            // 遍历数组获取数组中的每一个元素
            for( var i = 0 ; i < ducts.length ; i++){
                // 调用碰撞检测的方法
                // 1. 获取数组ducts中的每一个元素 ： 上管道元素 、 下管道元素
                var ductEle = ducts[i];
                // 2. 调用碰撞检测方法
                var flag = crash(birdEle , ductEle);
                // 3. 判断flag的结果
                if(flag == true){ // 碰到管道
                    // 1. 小鸟落地
                    birdEle.style.top = "395px";
                    // 2. 小鸟不飞了
                    clearInterval(birdEle.moverTime);
                    // 3. 管道不创建了
                    clearInterval(createTimer);
                    // 4. 管道不移动
                    isDelMover = true;
                    //5. 出现游戏结束的图片
                    gameoverEle.style.display = "block";

                     // 6. 小鸟死亡的音乐
                     changeEle.src = "./music/game_over.mp3";
                }
            }
        },30);

        //3. 小鸟向上飞翔
        document.onmousedown = function(e){
            // 避免整个页面的默认事件发生
            var ev = e || window.event;
            ev.preventDefault();
            // 实现向上飞翔
            birdEle.speed = -5;

            changeEle.src = "./music/game_fly.mp3";
        }

        //定义循环定时器：每隔3秒钟创建一根管道
        createTimer = setInterval(function () {
            // 定义当前被创建的管道的加分标记
            var isAdd = true;

            // 创建管道：每隔3秒钟创建一整根管道
            var liEle = document.createElement("li");
            // 获取上管道随机高度
            var upHeight = getRandomNum(60,270);
            // 获取下管道随机高度
            var downHeight = 425 - 100 - upHeight;
            // 向liEle中添加带标签的文本内容
            liEle.innerHTML = '<div class="up_duct duct_row" style="height: '+upHeight+'px;"><img src="./img/up_pipe.png" alt=""></div><div class="down_duct duct_row" style="height: '+downHeight+'px;"><img src="./img/down_pipe.png" alt=""></div>';
        
            // 让管道在距离游戏界面左边距300的位置产生并每隔30ms从右往左移动5 
            liEle.l = 300;
            // 定义循环定时器让产生的这个管道移动起来
            liEle.moverTime =  setInterval(function(){
                // 让 liEle.l  每隔30毫秒减少 5
                liEle.l -= 5;

                // 让管道距离游戏左边距的样式值设置为：  liEle.l
                liEle.style.left = liEle.l + "px";

                // 当 isDelMover == true时， 停止移动管道
                if(isDelMover == true){
                    clearInterval(liEle.moverTime);
                }

                // 当管道超过游戏界面，删除管道
                if(liEle.l <= -62){
                    // 1. 将liEle 从 ulEle中移除
                    ulEle.removeChild(liEle);

                    // 2. 将 liEle 管道的移动功能也删除
                    clearInterval(liEle.moverTime);
                }
                // 当管道的中线超过游戏界面的左边界说明，小鸟穿过管道，需要加分
                if(liEle.l <= -31){
                    if(isAdd == true){
                        scoreEle.innerHTML = parseInt(scoreEle.innerHTML)  + 1;
                        // 得分之后的音乐
                        changeEle.src = "./music/game_score.mp3";
                    }
                    isAdd = false;
                   // scoreEle.innerHTML = Number(scoreEle.innerHTML)  + 1;
                }
            },30);
            
            // 将liEle作为子元素添加到ul中
            ulEle.appendChild(liEle);
        }, 3000);
    }
}
// 定义方法：获取[min,max]之间的随机高度值
function getRandomNum(min , max){
    return Math.floor(Math.random()*(max-min+1)) + min;
}
/*
    Math.floor() : 向下取整     5.9 ---> 5
    Marh.random() : 产生[0,1) 范围内的随机小数
        Math.random() ： [0,1)
            Math.random()*(max-min+1) : [0,max-min+1)
                Math.floor(Math.random()*(max-min+1))  : [0,max-min]
                Math.floor(Math.random()*(max-min+1)) + min : [min , max]
*/
/*
    定义方法：碰撞检测
       参数1： 小鸟对象   参数2： 管道对象 ---> 上管道 / 下管道对象
*/
function crash( bird ,  duct){
    // 1. 将小鸟和管道的上下左右四条边都求出来
    var birdTop = bird.offsetTop;
    var birdBottom = birdTop + bird.offsetHeight;
    var birdLeft = bird.offsetLeft;
    var birdRight = birdLeft + bird.offsetWidth;

    var ductTop = duct.offsetTop;
    var ductBottom = ductTop + duct.offsetHeight;
    var ductLeft = duct.parentNode.offsetLeft;
    var ductRight = ductLeft + duct.offsetWidth;
    // 2. 碰撞判断
    if(birdRight >= ductLeft && birdLeft <= ductRight && birdTop <= ductBottom && birdBottom >= ductTop){ // 处理碰撞了
        return true;
    }
    else{// 处理没碰撞
        return false;
    }
}